<template>
  <div class="new">
    <myNav :twoMenu="true"/>

    <div class="new_container">
        <ul>
            <li v-for="(item,index) in articleList[currentIndex]" :key="index" @click="newDetail(item)">
                <div class="new_img">
                    <img :src="require('@/assets/img/'+item.url)"/>
                </div>
                <div class="text">
                    <div class="title">{{item.title}}</div>
                    <p>{{item.article}}</p>
                    <div class="date">发布于：{{item.date}}</div>
                </div>
            </li>
        </ul>
        <div class="pagination">
            <div>总页数 {{articleList.length}} </div>
            <div>当前是：第{{currentPage}}页</div>
            <div @click="prevPage">上一页</div>
            <div @click="nextPage">下一页</div>
        </div>
    </div>

    <bottom/>
    <contact/>
  </div>
</template>

<script>
import articleData from "@/assets/js/article.js";
// import { Loading } from 'vant';
export default {
    name:"new",
    components:{
        // 'van-loading':Loading
    },
    data(){
        return {
            articleList:[],
            currentIndex:0,
            currentPage:1,
            isDetail:false,
        }
    },
    mounted(){
        this.init()
    },
    methods:{
        init(){
            this.articleList = this.sliceArrFn(articleData)        
        },
        sliceArrFn(arr){//将一个大数组切割成多个小数组
            let result = []
            let size = 9
            for(let i=0; i<Math.ceil(arr.length/size);i++){
                let start = i * size;
                let end = start + size;
                result.push(arr.slice(start,end))
            }
            return result
        },
        prevPage(){//上一页
            if(this.currentPage == 1) return
            this.currentPage -= 1; 
            this.currentIndex -= 1;
            document.documentElement.scrollTop = 0;
        },
        nextPage(){//下一页
            if(this.currentPage == this.articleList.length) return
            this.currentPage += 1;
            this.currentIndex += 1;
            document.documentElement.scrollTop = 0;
        },
        newDetail(item){
            this.isDetail = true;
            this.$router.push({
                path:'/newDetail',
                query: {
                    id:item.id,
                    currentPageName:'新闻中心'
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
img{
    width:100%;
    height:100%;
}
.new_container{
    li{
        padding-top:15px;
        display:flex;
        justify-content: space-between;
        .new_img{
            width:170px;
            height:120px;
        }
        .text{
            width:250px;
            padding-left:6px;
            font-size:10px;
            .title{
                font-size:13px;
            }
            p,.date{
                line-height:20px;
            }
            p{
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;	
                -webkit-line-clamp: 3;
                line-clamp: 3;
                -webkit-box-orient: vertical;
                &::before{
                    content:"      ";
                    white-space: pre;
                }
            }
        }
    }
    .pagination{
        text-align:center;
        font-size:14px;
        padding-top: 30px;
        div{
            display: inline-block;
            border:1px solid #ddd;
            padding:4px;
            margin-right:6px;
        }
    }
}
.detail{
    .detail_header{
        text-align:center;
        div{
            &:nth-child(1){
                font-size:18px;
            }
            &:nth-child(2){
                font-size:14px;
                color:#666;
            }
        }
    }
}
</style>